import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue'
import { CaretDownOutlined } from '@ant-design/icons-vue'
import logoIcon from '@/assets/channel-management/detail/logo-icon.png'
import EditInfoPop from './components/EditInfoPop'
import AddSchemePop from './components/AddSchemePop'
import SetMaxAgePop from './components/SetMaxAgePop'
import AddDiscountPop from './components/AddDiscountPop'
import AddRebatePop from './components/AddRebatePop'
import AddBlackListPop from './components/AddBlackListPop'
import useUserStore from '@/stores/user'

@Component
export class AccountInfoView extends Render {
    showEditInfo = false
    showAddScheme = false
    showSetMaxAge = false
    showEditAgent = false
    showAddDiscount = false
    showAddRebate = false
    showAddBlackList = false
    renderHead() {
        return (
            <div class=" rounded-default bg-white-default">
                <div class="pb-20 flex items-start justify-between">
                    <div class="flex items-center">
                        <img src={logoIcon} class="w-60 h-60 mr-16" alt="" />
                        <div class="">
                            <div class="flex ">
                                <div class="text-black-light-200 text-lg mr-16">
                                    润梦人力资源服务河北有限公司
                                </div>
                                <a-tag color="error">已拉黑</a-tag>
                            </div>
                            <div class="mt-4 text-black-300">CQ26123145</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <Dropdown
                            overlay={
                                <Menu>
                                    {useUserStore().hasPermission(
                                        'client:clientProduct:edit'
                                    ) && (
                                        <MenuItem
                                            onClick={() => {
                                                this.showEditInfo = true
                                            }}
                                        >
                                            编辑资料
                                        </MenuItem>
                                    )}
                                    {useUserStore().hasPermission(
                                        'client:clientProduct:addPlan'
                                    ) && (
                                        <MenuItem
                                            onClick={() => {
                                                this.showAddScheme = true
                                            }}
                                        >
                                        新增方案
                                        </MenuItem>
                                    )}
                                    {useUserStore().hasPermission(
                                        'client:clientProduct:addCoupon'
                                    ) && (
                                        <MenuItem
                                            onClick={() => {
                                                this.showAddDiscount = true
                                            }}
                                        >
                                        新增优惠
                                        </MenuItem>
                                    )}
                                    {useUserStore().hasPermission(
                                        'client:clientProduct:addRebate'
                                    ) && (
                                        <MenuItem
                                            onClick={() => {
                                                this.showAddRebate = true
                                            }}
                                        >
                                        新增返利
                                        </MenuItem>
                                    )}
                                    {useUserStore().hasPermission(
                                        'client:clientProduct:overAge'
                                    ) && (
                                        <MenuItem
                                            onClick={() => {
                                                this.showSetMaxAge = true
                                            }}
                                        >
                                        超龄设置
                                        </MenuItem>
                                    )}
                                    {useUserStore().hasPermission(
                                        'client:clientProduct:block'
                                    ) && (
                                        <MenuItem
                                            onClick={() => {
                                                this.showAddBlackList = true
                                            }}
                                        >
                                        拉黑
                                        </MenuItem>
                                    )}
                                </Menu>
                            }
                        >
                            <div class="px-12 py-4 border-solid border-gray-light-300 border rounded-sm flex items-center mr-12">
                                <div class="text-base">更多设置</div>
                                <CaretDownOutlined />
                            </div>
                        </Dropdown>
                        <Button type="primary">返回</Button>
                    </div>
                </div>
                <div class="w-full border-1  border-gray-light-400"></div>
                <div class="mt-20 flex">
                    <div class="w-1/5">
                        <div class="text-gray-light-600 text-base">可用余额</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">
                            ￥8987.00
                        </div>
                    </div>
                    <div class="w-1/5">
                        <div class="text-gray-light-600 text-base">冻结资金</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">
                            1348
                        </div>
                    </div>
                    <div class="w-1/5">
                        <div class="text-gray-light-600 text-base">案件总数</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">
                            70
                        </div>
                    </div>
                    <div class="w-1/5">
                        <div class="text-gray-light-600 text-base">理赔率</div>
                        <div class="mt-12 font-semibold text-xl text-green  font-medium">
                            2024.10.12 14:00:00
                        </div>
                    </div>
                    <div class="w-1/5">
                        <div class="text-gray-light-600 text-base">建档时间</div>
                        <div class="mt-12 font-semibold text-xl text-green  font-medium">
                            2024.10.12 14:00:00
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    render() {
        return (
            <>
                {this.renderHead()}
                <EditInfoPop v-model:show={this.showEditInfo} />
                <AddSchemePop v-model:show={this.showAddScheme} />
                <SetMaxAgePop v-model:show={this.showSetMaxAge} />
                <AddDiscountPop v-model:show={this.showAddDiscount} />
                <AddRebatePop v-model:show={this.showAddRebate} />
                <AddBlackListPop v-model:show={this.showAddBlackList} />
            </>
        )
    }
}

export default toNative<{}, {}>(AccountInfoView)
